<template>
  <div class="container">
    <div class="profile-section">
      <div class="user-info">
        <h2 class="section-title">订单状态</h2>
        <p class="order-status">{{ mappedOrderStatus }}</p>
      </div>
    </div>

    <div class="details-section">
      <div class="details-column">
        <h3 class="section-subtitle">订单信息</h3>
        <el-row v-for="(item, index) in leftColumnData" :key="index" class="detail-row">
          <el-col :span="8" class="label-col">{{ item.label }}</el-col>
          <el-col :span="16" class="value-col">{{ item.value }}</el-col>
        </el-row>
      </div>
      <div class="details-column">
        <h3 class="section-subtitle">收货信息</h3>
        <el-row v-for="(item, index) in rightColumnData" :key="index" class="detail-row">
          <el-col :span="8" class="label-col">{{ item.label }}</el-col>
          <el-col :span="16" class="value-col">{{ item.value }}</el-col>
        </el-row>
      </div>
    </div>

    <div class="product-section">
      <h3 class="section-subtitle">商品信息</h3>
      <el-row v-for="(item, index) in dataList.orderDetail" :key="index" class="detail-row">
        <el-col :span="8" class="label-col">商品名称:</el-col>
        <el-col :span="16" class="value-col">{{ item.goods.goodsName }}</el-col>
      </el-row>
      <el-row v-for="(item, index) in dataList.orderDetail" :key="index" class="detail-row">
        <el-col :span="8" class="label-col">商品售价:</el-col>
        <el-col :span="16" class="value-col">{{ item.goods.goodsScore | currency }}</el-col>
      </el-row>
      <el-row v-for="(item, index) in dataList.orderDetail" :key="index" class="detail-row">
        <el-col :span="8" class="label-col">商品数量:</el-col>
        <el-col :span="16" class="value-col">1</el-col>
      </el-row>
    </div>

    <div class="shipping-section">
      <h3 class="section-subtitle">物流信息</h3>
      <el-row class="detail-row">
        <el-col :span="8" class="label-col">运费:</el-col>
        <el-col :span="16" class="value-col">0元 (包邮)</el-col>
      </el-row>
      <el-row class="detail-row">
        <el-col :span="8" class="label-col">优惠:</el-col>
        <el-col :span="16" class="value-col">{{ discountInfo }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { listOrderInfo } from '@/api/keep/commonUsers';

export default {
  data() {
    return {
      dataList: {},
      leftColumnData: [],
      rightColumnData: [],
      discountInfo: '无优惠', // 默认无优惠
    };
  },
  computed: {
    mappedOrderStatus() {
      switch (this.dataList.orderStatus) {
        case 0:
          return '待支付';
        case 1:
          return '已支付';
        case 2:
          return '已完成';
        case 3:
          return '退款中';
        case 4:
          return '已退款';
        default:
          return '未知状态';
      }
    },
    mappedOrderPayment() {
      switch (this.dataList.orderPayment) {
        case 0:
          return '微信支付';
        case 1:
          return '充值卡';
        case 2:
          return '次数卡';
        default:
          return '未知支付方式';
      }
    },
    mappedOrderType() {
      switch (this.dataList.orderType) {
        case 0:
          return '团课预约';
        case 1:
          return '私课';
        case 2:
          return '积分兑换';
        default:
          return '未知订单类型';
      }
    }
  },
  methods: {
    queryUserInfo() {
      const id = this.$route.query.id;
      if (id) {
        listOrderInfo(id)
          .then((response) => {
            this.dataList = response.data[0];
            console.log(this.dataList);
            this.calculateDiscount();
            this.formatTableData();
          })
          .catch((error) => {
            console.error('Failed to fetch user info:', error);
          });
      }
    },
    calculateDiscount() {
      const totalGoodsPrice = this.dataList.orderDetail.reduce((total, item) => total + parseFloat(item.goods.goodsScore), 0);
      const orderPrice = parseFloat(this.dataList.orderPrice);

      if (totalGoodsPrice > orderPrice) {
        this.discountInfo = `已优惠 ¥${(totalGoodsPrice - orderPrice).toFixed(2)}`;
      } else {
        this.discountInfo = '无优惠';
      }
    },
    formatTableData() {
      const allData = [
        { label: '订单号', value: this.dataList.id },
        { label: '订单金额', value: this.$options.filters.currency(this.dataList.orderPrice) },
        { label: '付款方式', value: this.mappedOrderPayment },
        { label: '下单时间', value: this.dataList.orderPlaceTime },
        { label: '订单类型', value: this.mappedOrderType },
      ];

      const allDataRight = [
        { label: '收货人', value: this.dataList.commonUsers.nickname },
        { label: '收货地址', value: this.dataList.deliveryAddress.fullAddress },
        { label: '收货手机号', value: this.dataList.deliveryAddress.phone },
      ];

      this.leftColumnData = allData;
      this.rightColumnData = allDataRight;
    },
  },
  mounted() {
    this.queryUserInfo();
  },
  filters: {
    currency(value) {
      return `¥${parseFloat(value).toFixed(2)}`;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 20px auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-section {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.order-status {
  font-size: 18px;
  color: #E74C3C;
  font-weight: bold;
}

.details-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.details-column {
  width: 48%;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.product-section,
.shipping-section {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.section-subtitle {
  font-size: 20px;
  color: #606266;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.detail-row {
  margin-bottom: 10px;
}

.label-col {
  text-align: right;
  font-weight: bold;
  color: #606266;
}

.value-col {
  padding-left: 10px;
  line-height: 28px;
  color: #333;
  word-break: break-all;
}
</style>
